<template>
<!--  <div></div>-->
  <el-row :gutter="10" class="h-full">
    <el-col :span="18" :offset="3">
      <el-row :gutter="10">
        <el-col :span="19">
          <div class="h-full w-full flex ">
            <div class="workspace-logo mr-2 rounded-lg" style="height:160px; width:40%;"></div>
            <el-space wrap alignment="flex-start" class="" style="width:60%;">
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px;">
                <svg class="icon h-10 w-10" style="" aria-hidden="true">
                  <use xlink:href="#icon-chaosongwode2"></use>
                </svg>
                <div class="ml-2">审批中心</div>
              </div>
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px;">
                <svg class="icon h-10 w-10" style="" aria-hidden="true">
                  <use xlink:href="#icon-my-work"></use>
                </svg>
                <div class="ml-2">通讯录</div>
              </div>
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px;">
                <svg class="icon h-10 w-10" style="" aria-hidden="true">
                  <use xlink:href="#icon-shebeishouce"></use>
                </svg>
                <div class="ml-2">云文档</div>
              </div>
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px;">
                <!--                <svg class="icon h-10 w-10" style="color: #1890FF">-->
                <!--                  <use xlink:href="#iconsetting-fill"></use>-->
                <!--                </svg>-->
                <el-icon class="icon h-10 w-10 text-4xl" color="#ffa800">
                  <UserFilled/>
                </el-icon>
                <div class="ml-2">个人中心</div>
              </div>
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px;">
                <svg class="icon h-10 w-10" style="color: #1890FF">
                  <use xlink:href="#icon-setting-fill"></use>
                </svg>
                <div class="ml-2">系统管理</div>
              </div>
            </el-space>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="h-full w-full shadow-l rounded-lg p-10 text-left background-1">
            <div class=" flex items-center ">
              <el-avatar :size="80" :src="myProfile.avatarUrl || defaultAvatar"/>
              <div class="ml-2">
                <div class="font-bold">{{ myProfile.realName }}</div>
                <div class="">{{ myProfile.deptName }}</div>
                <div class="">{{ myProfile.roleName }}</div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10" class="mt-5">
        <el-col :span="19" class=" text-left">
          <div class="font-bold"><span>我的应用</span></div>
          <div class="h-full w-full mt-2">
            <el-space wrap alignment="flex-start" class="" style="">
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px; ">
                <svg class="icon h-10 w-10" style="" aria-hidden="true">
                  <use xlink:href="#icon-wochulide"></use>
                </svg>
                <div class="ml-2">应用A</div>
              </div>
              <div class="rounded-lg bg-white flex items-center p-2 shadow-l hover-border cursor-pointer"
                   style="height: 60px; width: 180px; ">
                <svg class="icon h-10 w-10" style="color: #1890FF">
                  <use xlink:href="#icon-setting-fill"></use>
                </svg>
                <div class="ml-2">应用B</div>
              </div>
            </el-space>

          </div>
        </el-col>
        <el-col :span="5">
          <div class="bg-white text-sm shadow-l rounded-lg p-2">
            <div class=" flex items-center cursor-pointer" @click="$router.push(`/${tenantInfo.tenantCode}/dashboard/message/my-message`)">
              <span>通知公告</span>
              <el-icon>
                <ArrowRight/>
              </el-icon>
            </div>
            <el-divider class="my-2"/>
            <div class="invisible-scroll" style="height: calc(100vh - 400px)">
              <div v-for="e in messageList" class="mt-2 cursor-pointer">
                <div class="flex">
                  <div>{{ e.vSendTypeText }}</div>
                  <div class="ml-2">
                    <el-tag type="danger" size="small">{{ e.vReadStatusText }}</el-tag>
                  </div>
                </div>
                <div> {{ e.creationTime.substring(0, 16) }}</div>
                <div class="text-ellipsis overflow-hidden whitespace-nowrap w-full"> {{ e.context }}</div>
                <el-divider class="my-2"/>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, onUnmounted, ref, reactive} from 'vue'
import {useRouter} from 'vue-router';
import defaultAvatar from "@/assets/images/default-avatar.png";
import defaultLogo from "@/assets/images/default-logo.png";
import {$localStorage} from "@/utils/application-storage.js";
import {ArrowRight, UserFilled} from "@element-plus/icons-vue";
import $apiService from "@/axios/api.js";

const $router = useRouter();

const tenantInfo = ref({
  logo: defaultLogo,
  tenantCode: '',
  systemName: ''
})
const myProfile = ref({
  avatarUrl: defaultAvatar,
  realName: '',
  deptName: '',
  roleName: '',
})
const messageList = ref([])

onMounted(() => {
  tenantInfo.value = $localStorage.getTenantInfo()
  myProfile.value = $localStorage.getMyProfile()
  queryMessageList()
});
onUnmounted(() => {
});

const queryMessageList = () => {
  const searchForm = {
    params: {
      messageName_like: null,
      readStatus_in: ['Pending'],
      sendTime_begin: null,
    },
    page: 1,
    size: 10,
    sort: ['creationTime,desc'],
  }
  $apiService.getMyMessageList(searchForm).then((res) => {
    messageList.value = res.data.data.content
  })
}

</script>

<style scoped>
.ep-bg-purple {
  background-color: red;
}

.workspace-logo {
  background-image: url('@/assets/images/workspace-1.png');
  background-size: cover;
  background-position: center;
}

.background-1 {
  background-image: url('@/assets/images/background-1.png');
  background-size: cover;
  background-position: center;
}
</style>
